<template>
  <div class="global-container">
    <div class="global-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/current.png')"
      ></el-image>
      <div class="title">
        服务组
        <div class="title-content">
          提供服务组管理能力，支持将多个服务包以微服务方式组合起来形成服务组，进行统一管理和部署。
        </div>
      </div>
    </div>
    <div class="searchDiv1">
      <div class="searchDiv global-operate">
        <span class="keyword">关键词：</span>
        <el-input
          v-model="searchInput"
          placeholder="通过名称、描述检索"
          clearable
          class="inputStyle"
          style="width: 20%"
          prefix-icon="el-icon-search"
          @input="filterInfo"
        />
        <!-- <el-button type="primary" size="small">查询</el-button> -->
        <el-button
          type="primary"
          size="small"
          style="float: right"
          @click="openCreateServiceGroupDialog"
          class="el-button-primary-style"
        >
          <!--          @click="createServiceGroupDialog = true"-->
          创建服务组
        </el-button>
      </div>
    </div>
    <div>
      <div class="servicePackageList">
        <div>
          <el-table
            ref="multipleTable"
            :data="serviceGroupList"
            style="width: 100%"
            :cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
            :header-cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
            height="65vh"
          >
            <!--            <el-table-column type="selection"/>-->
            <el-table-column prop="groupName" label="名称" width="250">
              <template slot-scope="scope">
                <div class="ellipsis">
                  {{ scope.row.groupName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="描述">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.groupDescription"
                  placement="bottom"
                  popper-class="tooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div class="descSpan" @mouseover="onMouseOver($event)">
                    {{ scope.row.groupDescription }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="服务数量" prop="appNumber" width="250">
            </el-table-column>
            <el-table-column prop="updateTime" label="创建时间" width="250"/>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="padding: 0"
                  @click="deployServiceGroup(scope.row, 'deploy')"
                >
                  部署
                </el-button>
                <el-button
                  type="text"
                  style="padding: 0"
                  @click="deployServiceGroup(scope.row, 'edit')"
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  style="margin-right: 10px; padding: 0"
                  @click="deployServiceGroup(scope.row, 'detail')"
                >
                  详情
                </el-button>
                <el-popconfirm
                  title="确认删除服务组实例？"
                  @confirm="deleteGroup(scope.row.id)"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    style="color: #f56c6c; padding: 0"
                  >
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 10px; float: right">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="page.total"
            :page-size="page.pageSize"
            :page.sync="page"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>

    <div v-if="createServiceGroupDialog">
      <el-dialog
        title="创建服务组"
        :visible.sync="createServiceGroupDialog"
        width="500px"
        :before-close="beforeCloseCreateDialog"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
      >
        <create-service-group-dialog
          ref="createServiceGroupRef">
        </create-service-group-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import CreateServiceGroupDialog
    from "@/views/appstore/components/ServiceGroupComponents/CreateServiceGroupDialog.vue";
  import {errorLog} from "@/settings";

  export default {
    name: "ServiceGroup",
    components: {
      CreateServiceGroupDialog,
    },
    data() {
      return {
        searchInput: "",
        createServiceGroupDialog: false,
        tmpPage: {
          filterKey: "",
          pageNum: 1,
          pageSize: 10,
        },
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        isShowTooltip: false,
        serviceGroupList: [],
      };
    },
    methods: {
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      beforeCloseCreateDialog() {
        this.createServiceGroupDialog = false;
      },
      getAllServiceGroupInfo() {
        this.$appStoreApi
          .listGroup(this.tmpPage)
          .then((res) => {
            if (res && res.code === 200) {
              this.serviceGroupList = res.data.records;
              this.page.total = res.data.total;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      },
      filterInfo() {
        this.tmpPage.filterKey = this.searchInput;
        this.tmpPage.pageNum = 1;
        this.tmpPage.pageSize = 15;
        this.getAllServiceGroupInfo();
      },
      changePage(currentPage) {
        this.page.currentPage = currentPage;
        this.tmpPage.pageNum = currentPage;
        this.getAllServiceGroupInfo();
      },
      deployServiceGroup(serviceGroup, operate) {
        this.$router.push({
          name: "CreateServiceGroup",
          params: {
            serviceGroupInfo: serviceGroup,
            openType: operate,
          },
        });
      },
      deleteGroup(id) {
        this.$appStoreApi
          .deleteGroupInfo(id)
          .then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.data);
              this.getAllServiceGroupInfo();
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      },
      handleCommand(command, row) {
        if (command === "delete") {
          this.deleteGroup(row.id);
        } else {
          this.deployServiceGroup(row, command);
        }
      },
      openCreateServiceGroupDialog() {
        this.createServiceGroupDialog = true;
        this.$nextTick(() => {
          if (this.$refs.createServiceGroupRef !== undefined) {
            this.$refs.createServiceGroupRef.$on("closeCreateServiceGroupDialog", this.closeCreateServiceGroupDialog);
          }
        });
      },
      closeCreateServiceGroupDialog() {
        this.beforeCloseCreateDialog();
        this.$refs.createServiceGroupRef.$off("closeCreateServiceGroupDialog");
      }
    },
    beforeMount() {
      this.getAllServiceGroupInfo();
    },
  };
</script>

<style lang="css" scoped>
  .topRight {
    font-size: 15px;
  }

  .everyTab {
    margin-top: 3px;
  }

  /*.el-button {*/
  /*  border-radius: 30px;*/
  /*  display: inline-block;*/
  /*  margin: 0 8px;*/
  /*}*/

  /*::v-deep .el-button--primary {*/
  /*  background-color: #304156;*/
  /*  border-color: #304156;*/
  /*}*/

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #304156;
  }
</style>
